<template>
    <div class="archive-audio-card__wrapper">
        <el-image :src="cover" class="archive-cover__item" draggable="false" fit="cover">
            <div class="archive-cover__item-error" slot="error">没有上传封面</div>
        </el-image>
        <div class="archive-card-info__group">
            <div class="archive-title__item">
                <el-tag :type="stateTag.type" size="mini">{{ stateTag.name }}</el-tag>
                <a
                    :href="archiveLink"
                    :title="archiveTitle"
                    class="title__item"
                    draggable="false"
                    target="_black"
                >{{ archiveTitle }}</a>
            </div>
            <div class="archive-post-time__item">{{ postTime|parseTime }}</div>
            <span class="archive-id__item">aid: {{ archiveID }}</span>
            <metaModule :archive="archive" />
        </div>
        <div class="archive-card-right__group">
            <slot>
                <controllerModule :archive="archive" />
            </slot>
        </div>
    </div>
</template>

<script>
import metaModule from "./meta.vue";
import controllerModule from "./controller.vue";

export default {
    components: {
        metaModule,
        controllerModule,
    },
    props: {
        archive: {
            type: Object,
            required: true,
        },
    },
    computed: {
        archiveID() {
            return this.archive.aid;
        },
        archiveLink() {
            return this.link || "";
        },
        cover() {
            const cover = this.archive.cover;
            const host = "https://km-resource-v.miva.work/";

            return host + cover;
        },
        archiveTitle() {
            return this.archive.title || "未填写标题";
        },
        stateTag() {
            const arr = [
                { type: "info", name: "编辑中" },
                { type: "warning", name: "审核中" },
                { type: "success", name: "已通过" },
                { type: "danger", name: "未通过" },
            ];
            const { state } = this.archive;
            return arr[state];
        },
        postTime() {
            return new Date(this.archive.created_at);
        },
    },
    methods: {
        controllerBtnTouchHandler(code) {
            console.log(code);
        },
        deleteHandler() {},
    },
};
</script>

<style lang="scss">
$coverHeight: 100px;
$coverWidht: $coverHeight * (16 /10);

.archive-audio-card__wrapper {
    margin-bottom: 20px;
    padding: 10px;
    border: 1px solid #ddd;
    position: relative;
    display: flex;
    justify-content: flex-start;
    background: #fff;

    .archive-cover__item {
        width: $coverWidht;
        height: $coverHeight;
        box-shadow: 0 0 1px #000;
        flex-shrink: 0;

        &-error {
            width: $coverWidht;
            height: $coverHeight;
            line-height: $coverHeight;
            text-align: center;
            font-size: 12px;
            color: $textGrey;
            background-color: #f5f7fa;
        }
    }

    .archive-card-info__group {
        width: calc(100% - 230px);
        margin-left: 10px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .archive-title__item {
            font-size: 18px;
            display: flex;
            align-items: center;
            white-space: nowrap;

            .title__item {
                margin-left: 20px;
                transition: color 0.2s;
                text-overflow: ellipsis;
                overflow: hidden;
            }

            .title__item:hover {
                color: $menuActiveText;
            }
        }

        .archive-post-time__item {
            font-size: 12px;
            color: #99a2aa;
            padding: 20px 0;
        }

        .archive-id__item {
            position: absolute;
            top: 10px;
            right: 10px;
            font-size: 12px;
            color: $textGrey;
            transform: scale(0.8);
        }
    }

    .archive-card-right__group {
        position: absolute;
        right: 10px;
        bottom: 10px;
    }
}
</style>